<template>
  <div>
    <div style="width: 1200px; margin: 0 auto">
      <van-nav-bar left-text="返回详情页" left-arrow @click-left="onBack" />
    </div>
    <div style="width: 1200px; margin: 10px auto">
      <img src="images/log4.png" alt="" style="width: 100%" />
    </div>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th style="width: 40px">选项</th>
            <th style="line-height: 50px">商品图片</th>
            <th style="line-height: 50px; height: 40px; width: 550px">
              商品名称
            </th>
            <th style="line-height: 50px">商品价格</th>
            <th style="line-height: 50px">商品尺码</th>
            <th style="line-height: 50px">商品数量</th>
            <th style="line-height: 50px; width: 150px">商品金额</th>
            <th style="line-height: 50px">操作</th>
          </tr>
        </thead>
        <tbody id="tab">
          <tr v-for="(item, index) in list" :key="item.cid">
            <td>
              <van-checkbox
                v-model="item.checked"
                style="margin-left: 10px"
              ></van-checkbox>
            </td>
            <td>
              <img :src="item.curl" alt="" style="height: 40px; width: 60px" />
            </td>
            <td>{{ item.cname }}</td>
            <td>{{ item.cprice }}元</td>
            <td style="width: 100px">{{ item.csize }}码</td>
            <td>
              <button @click="sub(index)">-</button>
              <input
                v-model="item.cnumber"
                style="width: 40px; text-align: center"
              />
              <button @click="sup(index)">+</button>
            </td>
            <td>{{ item.cmoney }}元</td>
            <td>
              <a @click.prevent="del(index)" style="color: #c40000"> 删除 </a>
            </td>
          </tr>
        </tbody>
      </table>
      <div style="width: 1200px; margin: 5px auto 0px">
        全选 :
        <van-checkbox
          v-model="checkedAll"
          @click="fn($event)"
          style="display: inline-block"
        ></van-checkbox>
        <div style="float: right; width: 100px; text-align: center">
          <button
            style="
              display: inline-block;
              background: #c40000;
              color: white;
              height: 30px;
              border: 2px solid #ccc;
            "
            @click="Toast"
          >
            商品结算
          </button>
        </div>
        <div
          style="
            float: right;
            width: 150px;
            text-align: center;
            margin-top: 10px;
          "
        >
          总金额:<span
            style="color: #c40000; width: 80px; display: inline-block"
            >{{ totalMoney }}.00</span
          >元
        </div>
        <div
          style="
            float: right;
            width: 150px;
            text-align: center;
            margin-top: 10px;
          "
        >
          总件数:<span
            style="color: #c40000; width: 40px; display: inline-block"
            >{{ goodsCount }}</span
          >件
        </div>
      </div>
    </div>
    <div style="width: 1200px; margin: 10px auto">
      <img src="images/log7.png" alt="" style="width: 100%" />
    </div>
  </div>
</template>

<script>
import { Getcarts, Modifiy, Delete } from '@/api/cart'
import { Dialog } from 'vant'
import { Toast } from 'vant'
export default {
  data() {
    return {
      list: [],
      checkedAll: false
    }
  },
  async created() {
    let uid = JSON.parse(localStorage.getItem('userinfo') || '{}').id
    let res = await Getcarts(uid, {
      headers: {
        token: localStorage.getItem('token')
      }
    })
    console.log(res)
    this.list = res.data.data
    console.log(this.list)
  },
  methods: {
    Toast() {
      Toast('该功能未开发,请敬请期待!')
    },
    fn() {
      this.list.forEach((item) => (item.checked = this.checkedAll))
    },
    onBack() {
      this.$router.back()
    },
    async sub(index) {
      if (this.list[index].cnumber <= 1) {
        return
      }
      this.list[index].cnumber--
      this.list[index].cmoney =
        this.list[index].cnumber * this.list[index].cprice
      let result = await Modifiy(
        {
          cid: this.list[index].cid,
          cnumber: this.list[index].cnumber
        },
        {
          headers: {
            token: localStorage.getItem('token')
          }
        }
      )
      Toast(result.data.msg)
    },
    async sup(index) {
      this.list[index].cnumber++
      this.list[index].cmoney =
        this.list[index].cnumber * this.list[index].cprice
      let result = await Modifiy(
        {
          cid: this.list[index].cid,
          cnumber: this.list[index].cnumber
        },
        {
          headers: {
            token: localStorage.getItem('token')
          }
        }
      )
      Toast(result.data.msg)
    },
    del(index) {
      Dialog.confirm({
        title: '删除提示',
        message: '你确定要删除吗?'
      })
        .then(() => {
          let cid = this.list[index].cid
          this.list.splice(index, 1)
          Delete(
            { cid },
            {
              headers: {
                token: localStorage.getItem('token')
              }
            }
          ).then(function (result) {
            console.log(result)
            Toast(result.data.msg)
          })
        })
        .catch(() => {})
    }
  },
  watch: {
    list: {
      handler(valArr) {
        console.log(valArr)
        let count = valArr.length
        let cheCount = valArr.filter((item) => item.checked).length
        this.checkedAll = count == cheCount
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    totalMoney() {
      return this.list.reduce((pre, cur) => {
        if (cur.checked) {
          return pre + cur.cnumber * cur.cprice
        } else {
          return pre
        }
      }, 0)
    },
    goodsCount() {
      return this.list.reduce((pre, cur) => {
        if (cur.checked) {
          return pre + cur.cnumber
        } else {
          return pre
        }
      }, 0)
    }
  }
}
</script>

<style lang="less" scoped>
table,
tr,
td,
th {
  border: 1px solid #000;
}

table {
  margin: 0 auto;
  width: 1200px;
  border-spacing: 0px;
  border-collapse: collapse;
  text-align: center;
}
/deep/.van-checkbox__icon--checked .van-icon {
  background-color: black;
  border-color: #ccc;
}
</style>
